<template>
  <div>
    <div @mouseover="drawerOpen" class="navigation-button"></div>
    <div class="nav-top" style="left: -355px;" ref="drawerBody">
      <div class="nav-body">
        <div class="nav-bg" @mouseleave="drawerClose">
          <div class="back-icon"></div>
          <div class="nav-button" @click="jumpRoute('zfIndustryOverview')">
            <img src="../assets/img/zf/leftmenu_cyzl.png" alt="" width="60px" height="60px">
            <div style="width: 100%;">产业总览一张图</div>
          </div>
          <div class="nav-button" @click="jumpRoute('zfPerMuBenefit')">
            <img src="../assets/img/zf/leftmenu_mjzl.png" alt="" width="60px" height="60px">
            <div style="width: 100%;">亩均总览一张图</div>
          </div>
          <div class="nav-button" @click="jumpRoute('zfParkOverview')">
            <img src="../assets/img/zf/leftmenu_yqzl.png" alt="" width="60px" height="60px">
            <div style="width: 100%;">园区总览一张图</div>
          </div>
          <div class="nav-button" @click="jumpRoute('zfDiagnosticEvaluation')">
            <img src="../assets/img/zf/leftmenu_znzd.png" alt="" width="60px" height="60px">
            <div style="width: 100%;">智能诊断一张图</div>
          </div>
          <div class="nav-button" @click="jumpRoute('zfSafetyOverview')">
            <img src="../assets/img/zf/leftmenu_aqsc.png" alt="" width="60px" height="60px">
            <div style="width: 100%;">安全生产一张图</div>
          </div>
          <div class="nav-button" @click="jumpRoute('zfContingencyManagement')">
            <img src="../assets/img/zf/leftmenu_yjgl.png" alt="" width="60px" height="60px">
            <div style="width: 100%;">应急管理一张图</div>
          </div>
          <div class="nav-button" @click="jumpRoute('zfDangerousGoods')">
            <img src="../assets/img/zf/leftmenu_whp.png" alt="" width="60px" height="60px">
            <div style="width: 100%;">危化品一张图</div>
          </div>
          <div class="nav-button" @click="jumpRoute('zfEnvironmentalConservation')">
            <img src="../assets/img/zf/leftmenu_hjbh.png" alt="" width="60px" height="60px">
            <div style="width: 100%;">环境保护一张图</div>
          </div>
          <div class="nav-button" @click="jumpRoute('zfDataSharing')">
            <img src="../assets/img/zf/leftmenu_sjgx.png" alt="" width="60px" height="60px">
            <div style="width: 100%;">数据共享一张图</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      drawer: false
    }
  },
  methods: {
    jumpRoute (name) {
      this.$router.push({ name: name })
    },
    drawerOpen () {
      this.$refs.drawerBody.style.left = '0'
    },
    drawerClose () {
      this.$refs.drawerBody.style.left = '-355px'
    }
  }
}
</script>
<style lang="scss" scoped>
.navigation-button {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 20px;
  height: 100%;
  opacity: 0;
}
.nav-top {
  display: table;
  height: 100%;
  width: 355px;
  position:fixed;
  top: 0px;
  z-index: 1000;
  transition: left 1s;
}
.nav-body {
  width: 100%;
  display:table-cell;
  vertical-align:middle;
}
.nav-bg {
  height: 416px;
  background-image: url('../assets/img/zf/nav-bg.png');
  background-size: 100% 100%;
  padding: 40px 30px;
}
.nav-button {
  text-align: center;
  width: 32%;
  height: 70px;
  font-size: 12px;
  line-height: 35px;
  color: #FFFFFF;
  margin-bottom: 30px;
  display: inline-table;
}
.back-icon {
  position: absolute;
  top: 44%;
  left: 0;
  height: 12%;
  width: 35px;
  background-image: url('../assets/img/zf/back-icon.png');
  background-size: 100% 100%;
}
</style>
